<template>
	<view class="page">
		  <view class="top" v-if="show">
		  </view>
		<view class="content">
			<view class="title">输入验证码</view>
			<view class="tip">验证码已经发送至&nbsp;+86&nbsp;{{phone}}</view>
			<view class="inputBox">
				<view class="phone">
					<input v-model="code" type="number" class="right" placeholder="请输入验证码"/>
					<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"  start-text="重新获取"
					@change="codeChange"></u-verification-code>
					<view class="left"  @tap="getCode">{{tips}}</view>
				</view>
			</view>
			<button :loading="loading" :disabled="loading" class="btn" @tap="toUserSet">下一步</button>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
			  loading:false,
			  show:false,
			  type:'',
			  tips: '',
			  seconds: 60,
			  phone:"",
			  code:''
			}
		},
		onLoad(e) {
			if(e.phone){
				this.phone = e.phone
			}
			if(e.type){
				this.type = e.type
			}
			// #ifdef H5
			this.show = true
			// #endif
		},
		onReady() {
			this.$refs.uCode.start();
		},
		methods:{
			toUserSet(){
				if(this.code ==''){
					this.$tools.toast('请输入验证码')
					return
				}
				// this.loading = true
				// this.$request("Post","/ajax/validateCode",{phoneEmail:this.phone,zone:'86',code:this.code}).then(res=>{
				// 	this.loading = false
					if(this.type == 1){
						uni.navigateTo({
							url:"./restPassWord?phone="+this.phone+"&code="+this.code
						})
					}else{
						uni.navigateTo({
							url:"./userSet?phone="+this.phone+"&code="+this.code
						})
					}
					
				// }).catch(err=>{
				// 	this.loading = false
				// })
			},
			codeChange(text) {
							this.tips = text;
						},
						getCode() {							
							if(this.$refs.uCode.canGetCode) {
								uni.showLoading({
									title: '正在获取验证码'
								})
								this.$request("Post",'/ajax/sendCode',{phoneEmail:this.phone,zone:'86'}).then(res=>{
									uni.hideLoading();
									this.$tools.toast('验证码已发送');
									this.$refs.uCode.start();
								})
							} else {
								return
							}
						},
						end() {
							
						},
						start() {
							
						}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #FFFFFF;
		z-index: 99;
	}
    .top {
    	height: 44px;
    }

	.content {
		margin-top: 100rpx;
		padding: 0 60rpx;
		.title {
				font-size: 40rpx;
				font-weight: 700;
		}

		.tip {
			margin-top: 30rpx;
			font-size: 30rpx;
		}
		input{
			font-size: 27rpx!important;
		}
		.inputBox{
			margin-top: 80rpx;
			.phonetip{
				font-size: 21rpx;
				color: #808080;
			}
			.phone{
				display: flex;
				justify-content: left;
				align-items: center;
				padding: 30rpx 0;
				border-bottom: 0.5px solid $uni-border-color;
				.left{
				    flex: none;
                    color: #808080;
					font-size: 25rpx;
				}
				.right{
					flex: auto;
					padding: 5rpx;
				}
				
			}
			}
			   .btn{
				  background: $uni-bg-color;
				  height: 90rpx;
				  line-height: 90rpx;
				   color: #FFFFFF;
				   margin-top: 60rpx;
			   }
	}
</style>
